<template>
    <div class="app-container" ref="appContainerRef" style="height: 100%">
        <div class="header">
            <div>
                <el-input v-model="query.name" placeholder="请输入题目名称" style="width: 200px;" class="mr-10" clearable />
                <el-select v-model="query.type" placeholder="请选择题目类型" clearable style="width: 200px" class="mr-10">
                    <el-option v-for="item in questionTypeList" :key="item.value" :value="item.label" />
                </el-select>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button type="success" @click="add">新增</el-button>
            </div>

        </div>
        <div class="mian">
            <el-table v-loading="loading" :data="list" border stripe fit highlight-current-row style="width: 100%"
                :height="tableHeight" ref="tableRef" :header-cell-style="{ background: '#ECF1FE', color: '#606266' }">
                <el-table-column label="姓名" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.phone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否通过三级教育" align="center">
                    <template slot-scope="{row}">
                        <el-tag v-if="row.pass_three == 0" type="success">通过</el-tag>
                        <el-tag v-if="row.pass_three == 1" type="danger">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="照片" align="center">
                    <template slot-scope="{row}">
                        <el-image style="width: 50px; height: 50px" :src="row.photo" :preview-src-list="[row.photo]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="身份证" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.id_card }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="{row}">
                        <el-button type="primary" @click="edit(row)">编辑</el-button>
                        <el-button type="danger" @click="del(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px 0px;display: flex;justify-content: end;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog :visible="dialogVisible" title="新增人员">
        </el-dialog>
    </div>
</template>
<script>
import { debounce } from "@/utils/index"
export default {
    data() {
        return {
            query: {
                type: "",//0是单选 1是多选
                name: "",
            },
            questionTypeList: [
                {
                    value: 0,
                    label: "单选"
                },
                {
                    value: 1,
                    label: "多选"
                },

            ],
            loading: false,
            list: [
                {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120
                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                }, {
                    id: 1,
                    name: "杨帆",
                    teams_group_id: 1,
                    phone: 15575932402,
                    id_card: 342422199405105814,
                    pass_three: 0,
                    photo: "http://localhost:3000/images/logo.png",
                    open_id: "dsds4s156s1d56s1d5sd",
                    score: 120

                },
            ],
            currentPage: 1,
            total: 0,
            pageSize: 10,
            tableHeight: 500,
            dialogVisible: false
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.setTableHeight()
            window.onresize = () => {
                debounce(this.setTableHeight(), 200, true)
            }
        })
    },
    methods: {
        handleSizeChange() {

        },
        handleCurrentChange() {

        },
        setTableHeight() {
            let offsetHeight = this.$refs.appContainerRef.offsetHeight;
            this.tableHeight = offsetHeight - 20 - 33 - 20 - 50;
            this.$refs.tableRef.doLayout()
        },
        edit(row) {

        },
        del(row) {

        },
        search() {

        },
        add() {
            this.dialogVisible = true;
        }
    },
}
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
</style>